<!-- extends表明此页面继承自 base.html 文件 -->
{% extends "base.html" %}
{% load static %}

<!-- 写入 base.html 中定义的 title -->
{% block title %}
首页
{% endblock title %}

<!-- 写入 base.html 中定义的 content -->
{% block content %}
<!-- 定义放置文章标题的div容器 -->
<div class="container">
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item">
                <a href="{% url 'article:article_list' %}">
                    最新
                </a>
            </li>
            <li class="breadcrumb-item">
                <a href="{% url 'article:article_list' %}?order=total_views">
                    最热
                </a>
            </li>
        </ol>
    </nav>

    {% for article in articles %}
    <div class="row mt-2">
        <!-- 文章内容 -->
        <div class="col-sm-12">
            <!-- 卡片容器 -->
            <div class="card h-100">
                <!-- 标题 -->
                <!-- 摘要 -->
                <div class="card-body">
                    <h4 class="card-title">{{ article.title }}</h4>
                    <p class="card-text">{{ article.body|slice:'100' }}...</p>
                    <a href="{% url 'article:article_detail' article.id %}"  class="card-link">阅读本文</a>
                        <small class="col align-self-end" style="color: gray;">
                            <span class="bi bi-eye">
                            {{ article.total_views }}
                            </span>
                        </small>
                </div>
            </div>
        </div>
    </div>
    {% endfor %}
</div>

<!-- 页码导航 -->
<div class="pagination row m-auto">
    <div class="m-auto text-center">
        <span class="step-links ">
            <!-- 如果不是第一页，则显示上翻按钮 -->
            {% if articles.has_previous %}
<!--                <a href="?page=1" class="btn btn-success">-->
<!--                    &laquo; 1-->
<!--                </a>-->
                <a href="?page=1&order={{ order }}" class="btn btn-success">
                    &laquo; 1
                </a>
                <span>...</span>
                <a href="?page={{ articles.previous_page_number }}"
                   class="btn btn-secondary"
                >
                    {{ articles.previous_page_number }}
                </a>
            {% endif %}

            <!-- 当前页面 -->
            <span class="current btn btn-danger btn-lg">
                {{ articles.number }}
            </span>

            <!-- 如果不是最末页，则显示下翻按钮 -->
            {% if articles.has_next %}
<!--                <a href="?page={{ articles.next_page_number }}"-->
<!--                   class="btn btn-secondary"-->
<!--                >-->
<!--                    {{ articles.next_page_number }}-->
<!--                </a>-->
                <a href="?page={{ articles.next_page_number }}&order={{ order }}"
                    class="btn btn-secondary">{{ articles.next_page_number }}</a>
                <span>...</span>
<!--                <a href="?page={{ articles.paginator.num_pages }}"-->
<!--                   class="btn btn-success"-->
<!--                >-->
<!--                    {{ articles.paginator.num_pages }} &raquo;-->
<!--                </a>-->
                <a href="?page={{ articles.paginator.num_pages }}&order={{ order }}"
                    class="btn btn-success">{{ articles.paginator.num_pages }} &raquo;</a>
            {% endif %}
        </span>
    </div>
</div>

{% endblock content %}